<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close"
  >
    <el-form v-if="dialogFormVisible" ref="form" :model="form">
      <media-upload
        :image="form.room_photo"
        :video="form.room_video"
        @onChange="mediaList"
      />
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { editOneHouse } from '@/api/room'
  import mediaUpload from '@/components/mediaUpload'
  export default {
    name: 'RoomMedia',
    components: { mediaUpload },
    data() {
      return {
        form: {
          room_id: '',
          room_video: '',
          room_photo: '',
        },
        title: '编辑视频图片',
        dialogFormVisible: false,
        photoData: {
          room_id: '',
          field_name: 'room_photo',
          field_value: '',
        },
        videoData: {
          room_id: '',
          field_name: 'room_video',
          field_value: '',
        },
      }
    },
    methods: {
      showEdit(row) {
        this.form.room_id = row.id
        this.photoData.room_id = row.id
        this.videoData.room_id = row.id
        this.form.room_photo = row.room_photo
        this.form.room_video = row.room_video
        this.dialogFormVisible = true
      },
      close() {
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      mediaList(res) {
        if (res.videoList.length >= 1) {
          this.videoData.field_value = res.videoList.join(',')
        }
        if (res.imageList.length >= 1) {
          this.photoData.field_value = res.imageList.join(',')
        }
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { ret } = await editOneHouse(this.photoData)
            const data = await editOneHouse(this.videoData)
            if (ret == 200 && data.ret == 200) {
              this.$baseMessage(
                '修改成功',
                'success',
                'vab-hey-message-success'
              )
              this.$emit('fetch-data')
              this.close()
            }
          }
        })
      },
    },
  }
</script>
<style lang="scss" scoped></style>
